{% extends 'base/front_base.html' %}

{% block title %}
    课程列表页
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/course/course_index.min.css' %}">
{% endblock %}

{% block main %}
    <div class="main">
        <div class="course-nav">
            <div class="nav-container">
                <h3 class="title">在线课堂</h3>
                <ul class="nav-list">
                    <li class="active"><a href="#">最新课堂</a></li>
                    <li><a href="#">投资人说</a></li>
                    <li><a href="#">明星案例</a></li>
                    <li><a href="#">创业知识</a></li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <ul class="course-list">
                {% for course in courses %}
                    <li>
                        <a href="{% url 'course:course_detail' course_id=course.pk %}">
                            <div class="thumbnail-group">
                                <img src="{{ course.cover_url }}" alt="" class="thumbnial">
                            </div>
                            <div class="course-info">
                                <p class="title">{{ course.title }}</p>
                                <p class="author">{{ course.teacher.username }}</p>
                                <p class="price-group">
                                    {% if course.price > 0 %}
                                        <span class="pay">￥{{ course.price }}</span>
                                    {% else %}
                                        <span class="free">免费</span>
                                    {% endif %}
                                </p>
                            </div>
                        </a>
                    </li>
                {% endfor %}

            </ul>
        </div>
    </div>
{% endblock %}